<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
    <button onclick="fn()">外部销毁</button>
    <div id="app">
        <button ref="btnRef" @click="num++">{{num}}</button>
        <button @click="$destroy()">销毁</button>
    </div>
</body>
<script>
    const vm = new Vue({
        el:"#app",
        data:{
            num:1
        },
        beforeDestroy(){
            console.log("1-beforeDestroy",this.num,this.$refs.btnRef);
        },
        destroyed(){
            console.log("2-destroyed",this.num,this.$refs.btnRef);
            clearInterval(this.timer);
        },
        mounted(){
            this.timer = setInterval(()=>{
                console.log("interval")
                this.num++;
            },1000);
        }
    })
    function fn(){
        vm.$destroy();
    }
</script>
</html>